import React, { RefObject, useRef, useState } from 'react'
import style from './index.less';
import { Button, DatePickerRef, Form, Input, NoticeBar, Picker, Space, TextArea } from 'antd-mobile';
import { LocationFill } from 'antd-mobile-icons';
import PriceArea from '@/components/jiagequjian';
import { divide } from 'lodash';
const Dingdan = () => {
    // const form = Form.useForm();
    const basicColumnsm = [
        [
            { label: '北京', values: '18' },
            { label: '上海', values: '19' },
            { label: '深圳', values: '20' },
            { label: '重庆', values: '30' },
            { label: '武汉', values: '31' },
        ],
        [
            { label: '巴南', values: '21' },
            { label: '渝北', values: '90' },
        ],
    ]
    const basicColumnsl = [
        [
            { label: '北京', value: '1' },
            { label: '美国', value: '2' },
            { label: '重庆', value: '3' },
            { label: '武汉', value: '4' },
            { label: '长安', value: '5' },
        ],
        [
            { label: '巴南', value: '6' },
            { label: '渝北', value: '7' },
            { label: '江北', value: '8' },
            { label: '渝中', value: '9' },
            { label: '九龙坡区', value: '10' },
        ],
    ]
    const basicColumnsb = [
        [
            { label: '周一', value: '11' },
            { label: '周二', value: '12' },
            { label: '周三', value: '13' },
            { label: '周四', value: '14' },
            { label: '周五', value: '15' },
        ],
        [
            { label: '上午', value: '16' },
            { label: '下午', value: '17' },
        ],
    ]
    const [values, setValues] = useState<(string | null)[]>([])
    const [value, setValue] = useState<(string | null)[]>([])
    const [valuel, setValuel] = useState<(string | null)[]>([])
    const priceArea = useRef<any>()

    const changePriceArea = (value: number[]) => {
        priceArea.current = { ...value }
    }

    const submit = (values: any) => {
        console.log(values)
    }

    return (


        <div className={style.page}>
            <div className={style.content}>
                <Form layout='horizontal' onFinish={submit}
                >
                    <div className={style.block}>
                        <div className={style.title}>基本信息</div>
                        <Form.Item
                            label='商品分类'
                            name='username'
                            rules={[{ required: true, message: '商品分类不能为空!' }]}
                            extra={
                                <Picker
                                    columns={basicColumnsm}
                                    value={values}
                                    onConfirm={setValues}
                                    onSelect={(val, extend) => {
                                        console.log('onSelect', val, extend.items)
                                    }}
                                >
                                    {(items, { open }) => {
                                        return (
                                            <Space align='center' onClick={open}>
                                                {items.every(item => item === null)
                                                    ? '请输入'
                                                    : items.map(item => item?.label ?? '请输入').join(' - ')}
                                            </Space>
                                        )
                                    }}
                                </Picker>
                            }
                        >
                        </Form.Item>
                        <NoticeBar
                            content='开票名称：白菜（如未匹配，请修改商品名称）'
                            wrap
                            color='alert'
                            icon={<LocationFill />}
                        />
                        <Form.Item
                            label='商品名称'
                            name='shangpingming'
                            rules={[{ required: true, message: '姓名不能为空!' }]}
                        >
                            <Input
                                placeholder='请输入'
                                style={{ '--text-align': 'right' }}

                                clearable
                            />
                        </Form.Item>
                        <Form.Item
                            label='商品产地'
                            name='username'
                            rules={[{ required: true, message: '产地不能为空!' }]}
                            onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                                datePickerRef.current?.open()
                            }}
                            extra={
                                <Picker
                                    columns={basicColumnsl}
                                    value={valuel}
                                    onConfirm={setValuel}
                                    onSelect={(val, extend) => {
                                        console.log('onSelect', val, extend.items)
                                    }}
                                >
                                    {(items, { open }) => {
                                        return (
                                            <Space align='center' onClick={open}>
                                                {items.every(item => item === null)
                                                    ? '请输入'
                                                    : items.map(item => item?.label ?? '请输入').join(' - ')}
                                            </Space>
                                        )
                                    }}
                                </Picker>
                            }
                        >
                        </Form.Item>
                        <Form.Item
                            label='商品发货地'
                            name='username'
                            rules={[{ required: true, message: '商品发货地不能为空!' }]}
                            onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                                datePickerRef.current?.open()
                            }}
                            extra={
                                <Picker
                                    columns={basicColumnsb}
                                    value={value}
                                    onConfirm={setValue}
                                    onSelect={(val, extend) => {
                                        console.log('onSelect', val, extend.items)
                                    }}
                                >
                                    {(items, { open }) => {
                                        return (
                                            <Space align='center' onClick={open}>
                                                {items.every(item => item === null)
                                                    ? '请输入'
                                                    : items.map(item => item?.label ?? '请输入').join(' - ')}
                                            </Space>
                                        )
                                    }}
                                </Picker>
                            }
                        >
                        </Form.Item>
                        <Form.Item
                            label='商品单价'
                            name='shangpingjia'
                            rules={[{ required: true, message: '商品单价不能为空!' }]}
                        >
                            <PriceArea value={[]}/>
                        </Form.Item>
                        <Form.Item
                            label='商品数量'
                            name='shangpingshul'
                            rules={[{ required: true, message: '商品数量不能为空!' }]}
                            extra='斤'
                        >
                            <Input
                                placeholder='请输入'
                                style={{ '--text-align': 'right' }}
                                clearable

                            />
                        </Form.Item>
                    </div>
                    <div className={style.block}>
                        <div className={style.title}>商品描述</div>
                        <TextArea
                            placeholder='请输入'
                            autoSize={{ minRows: 3, maxRows: 5 }}
                        />
                    </div>
                    <div className={style['btn-warp']}>
                        <div>
                            <Button block color='success' size='large' type='submit' >
                                提交
                            </Button>
                        </div>
                    </div>
                </Form>
            </div>

        </div>



    )
}
export default Dingdan;
